<template>
	<view class="preset">
		<view class="prompt">
			预置语是在我们发帖的时候点击<text class="iconfont icon-operation"></text>按钮一键插入内容，比如QQ等...
		</view>
		<textarea
			v-model="content"
			class="textarea"
			placeholder="请输入预置语"
			maxlength="-1"
			placeholder-class="placeholder-class"
			auto-height="true"></textarea>
		<view
			class="button"
			@click="clickIncreaseButton">增加</view>
		<template v-if="list.length">
			<view class="list">
				<view
					@click="clickDelete(index)"
					class="_for"
					v-for="(item,index) in list">
					<view class="content">{{item}}</view>
					<view class="del"><text class="iconfont icon-shibai"></text></view>
				</view>
			</view>
			<view class="delAllButton" @click="clickDelAllButton">全部删除</view>
		</template>
		<template v-else>
			<public-empty></public-empty>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:"",
				list:[]
			}
		},
		onLoad() {
			// 获取本地储存
			this.getStorage();
		},
		methods: {
			getStorage(){
				uni.getStorage({
					key: 'cachePreset',
					success: (res) => {
						this.list = res.data;
					}
				});
			},
			// 增加按钮
			clickIncreaseButton(){
				if(this.content){
					this.list.push(this.content);
					uni.setStorage({
						key: 'cachePreset',
						data: this.list,
						success: (res) => {
							this.content = "";
							this.getStorage();
						}
					});
				}
			},
			// 删除按钮
			clickDelete(index){
				uni.showModal({
					title: "注意",
					content: "确定删除？不可恢复哟",
					success: (res) => {
						if(res.confirm) {
							this.list.splice(index,1);
							uni.setStorage({
								key: 'cachePreset',
								data: this.list,
								success: (res) => {
									this.getStorage();
								}
							});
						}
					}
				});
			},
			clickDelAllButton(){
				uni.showModal({
					title: "注意",
					content: "确定删除？不可恢复哟",
					success: (res) => {
						if(res.confirm) {
							uni.removeStorage({
								key: 'cachePreset',
								success: (ref) => {
									this.list = []
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.preset{
	.prompt{
		color: $ZhanWeiSe;
		font-size: 28rpx;
		padding: 25rpx;
		padding-bottom: 0;
		text{
			padding: 0 5rpx;
		}
	}
	.textarea{
		width:calc(100% - 80rpx);
		padding: 15rpx;
		margin: 25rpx;
		box-shadow: 0 0 1rpx $ZhanWeiSe;
		background: $BeiJingSe;
		font-size: 28rpx;
		min-height: 150rpx;
		.placeholder-class{
			font-size: 28rpx;
			color: $ZhanWeiSe;
		}
	}
	.button{
		width: 200rpx;
		height: 80rpx;
		background: $LanSe;
		color: #FFF;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: auto auto 25rpx auto;
		border-radius: 10rpx;
	}
	.list{
		padding: 0 25rpx;
		._for{
			display: flex;
			align-items: center;
			.content{
				font-size: 28rpx;
				box-shadow: 0 0 1rpx $ZhanWeiSe;
				background: $BeiJingSe;
				padding: 15rpx;
				flex: 1;
				margin-right: 10rpx;
				line-height: 35rpx;
			}
			.del{
				flex-shrink: 0;
				line-height: 40rpx;
				text{
					font-size: 40rpx;
				}
			}
		}
	}
	.delAllButton{
		width: 200rpx;
		height: 80rpx;
		background: $HongSe;
		color: #FFF;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 25rpx auto 25rpx auto;
		border-radius: 10rpx;
	}
}

</style>
